<template>
    <div class>
        <div class="row mb-1">
            <div class="col">
                <el-button @click="dialogVisible = true" type="primary">发送短信</el-button>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-table border :data="tableData" height="65vh" style="width: 100%">
                    <el-table-column prop="ID" label="ID"></el-table-column>
                    <el-table-column prop="username" label="用户名称"></el-table-column>
                    <el-table-column prop="phonenum" label="手机号码"></el-table-column>
                    <el-table-column prop="state" label="发送状态"></el-table-column>
                    <el-table-column prop="createdAt" sortable="custom" :formatter="({ createdAt }) => TimeYH(createdAt)"
                        label="发布时间"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange"
                    :page-size="Number(formquery._limit)" layout="prev, pager, next" :total="count"></el-pagination>
            </div>
        </div>
        <el-dialog title="短信通知" v-model="dialogVisible" width="80%">
            <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择短信模板">
                    <el-select v-model="ruleForm.codeid">
                        <!-- <el-option v-for="v in sms" :value="v.templateCode" :label="v.templateName"></el-option> -->
                        <el-option value="SMS_460690595" label="账号提醒"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="内容" prop="region">
                    <!-- {{ sms.find(e => e.templateCode === ruleForm.codeid)?.templateContent }} -->
                    您的账号${phonenum}已开通新的课程，密码${password}。请在电脑端登录www.hterobot.com进行学习
                </el-form-item>
                <el-form-item label="选择用户" prop="region">
                    <el-avatar :size="48" :src="ruleForm.user?.headportrait" @click="dialogVisible2 = true"></el-avatar>
                    <br />
                    <span>{{ ruleForm.user ? ruleForm.user.name : "" }}</span>
                </el-form-item>
                <div class="row">
                    <div class="col text-right">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </div>
                </div>
            </el-form>
            <el-dialog width="950px" v-model="dialogVisible2">
                <User v-bind="{ userhandleCurrentChange, tablekey }"></User>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { asyncSendSmsRequest, asyncselectsms, Iobj, asyncquerySmsTemplateListRequest, IquerySmsTemplateListRequest } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { TimeYH } from '../../../util/time'
import User from "../User/index.vue";
const dialogVisible = ref(false)


const formquery = reactive<Iobj<Studycodemodel.Isms>>({
    _offset: 0,
    _limit: 20
})


const tablekey: Array<keyof Studycodemodel.Iuser> = ["name", "ID"];


const dialogVisible2 = ref(false)
function userhandleCurrentChange(data: Studycodemodel.Iuser) {
    ruleForm.user = data
    ruleForm.userid = data.ID
    dialogVisible2.value = false;
}

const ruleForm = reactive<Studycodemodel.Isms>({
    codeid: 'SMS_460690595',
})

const sms = ref<IquerySmsTemplateListRequest[]>([])

const tableData = ref<Studycodemodel.Isms[]>([])
const count = ref(0)
async function start() {
    const data = await asyncselectsms(formquery)
    tableData.value = data.rows
    count.value = data.count
    sms.value = await asyncquerySmsTemplateListRequest()
}

function handleCurrentChange(val: number) {
    formquery._offset = Number(formquery._limit) * (val - 1);
    start()
}

async function submit() {
    await asyncSendSmsRequest(ruleForm)
    dialogVisible.value = false
    start();
}


onMounted(() => {
    start()
})



</script>

<style scoped></style>